import React from 'react';
import { Form, Row, Col, Input, Button, Icon, Select, DatePicker } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const { Option } = Select;

export default class AdvancedForm extends React.Component {
  state = {
    expand: false,
  };
  componentDidMount() {
    this.props.onRef(this);
  }
  // To generate mock Form.Item
  getFields() {
    const count = this.state.expand ? 10 : 6;
    const { getFieldDecorator } = this.props.form;
    const children = [];
    for (let i = 0; i < 10; i++) {
      children.push(
        <Col span={8} key={i} style={{ display: i < count ? 'block' : 'none' }}>
          <Form.Item label={`Field ${i}`} labelCol={2} wrapperCol={6}>
            {getFieldDecorator(`field-${i}`, {
              rules: [
                {
                  required: true,
                  message: 'Input something!',
                },
              ],
            })(<Input placeholder="placeholder" />)}
          </Form.Item>
        </Col>
      );
    }
    return children;
  }

  handleSearch = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      let params = {};
      const { date } = values;
      if (date && date.length > 0) {
        const devFixStartDate = date[0].format('YYYY-MM-DD');
        const devFixEndDate = date[1].format('YYYY-MM-DD');
        values = {
          ...values,
          devFixStartDate,
          devFixEndDate,
        };
      }
      //console.log('Received values of form: ', values);
      for (let key of Object.keys(values)) {
        if (values[key] !== undefined && values[key] !== '') {
          params[key] = values[key];
        }
      }

      this.props.onSearch(params);
    });
  };

  exportExcel = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      let params = {};
      //console.log('Received values of form: ', values);
      const { date } = values;
      if (date && date.length > 0) {
        const devFixStartDate = date[0].format('YYYY-MM-DD');
        const devFixEndDate = date[1].format('YYYY-MM-DD');
        values = {
          ...values,
          devFixStartDate,
          devFixEndDate,
        };
      }
      for (let key of Object.keys(values)) {
        if (values[key] !== undefined && values[key] !== '') {
          params[key] = values[key];
        }
      }
      this.props.onExport(params);
    });
  };
  handleReset = () => {
    this.props.form.resetFields();
  };

  toggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <Form className="ant-advanced-search-form" onSubmit={this.handleSearch} layout="horizontal">
        <Row gutter={24}>
          <Col span={4} style={{ textAlign: 'left' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator('devId', {
                rules: [{ message: '请输入设备ID...' }],
              })(<Input placeholder="设备ID" />)}
            </FormItem>
          </Col>
          <Col span={4} style={{ textAlign: 'left' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator('vehLicplateNo', {
                rules: [{ message: '请输入车牌号码...' }],
              })(<Input placeholder="车牌号码" />)}
            </FormItem>
          </Col>
          <Col span={4} style={{ textAlign: 'left' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator('playProgName', {
                rules: [{ message: '请输入节目名称...' }],
              })(
                <Select placeholder="节目名称" allowClear="true" style={{ width: '100%' }}>
                  {this.props.program.map(item => (
                    <Option value={item.name}>{item.name}</Option>
                  ))}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={4} style={{ textAlign: 'left' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator('devName', {
                rules: [{ message: '请输入设备名称...' }],
              })(<Input placeholder="设备名称" />)}
            </FormItem>
          </Col>
          <Col span={4} style={{ textAlign: 'left' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator('vehGroup', {
                rules: [{ message: '请输入设备ID...' }],
              })(<Input placeholder="车组名称" />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={4} style={{ textAlign: 'left' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator(
                'scrSwitchFlag',
                {}
              )(
                <Select allowClear="true" placeholder="屏幕状态" style={{ width: '100%' }}>
                  <Option value={0}>关闭</Option>
                  <Option value={1}>开启</Option>
                  <Option value={-1}>全部</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={4} style={{ textAlign: 'left' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator(
                'onOffLine',
                {}
              )(
                <Select allowClear="true" placeholder="在线状态" style={{ width: '100%' }}>
                  <Option value={0}>离线</Option>
                  <Option value={1}>在线</Option>
                  <Option value={-1}>所有</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={4} style={{ textAlign: 'left' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator(
                'bindFlag',
                {}
              )(
                <Select allowClear="true" placeholder="绑定状态" style={{ width: '100%' }}>
                  <Option value={0}>未绑定</Option>
                  <Option value={1}>已绑定</Option>
                  <Option value={-1}>全部</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={4} style={{ textAlign: 'left' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator(
                'wuSwitchFlag',
                {}
              )(
                <Select allowClear="true" placeholder="WIFI/USB状态" style={{ width: '100%' }}>
                  <Option value={0}>关闭</Option>
                  <Option value={1}>开启</Option>
                  <Option value={-1}>全部</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={4} style={{ textAlign: 'left' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator(
                'simIsOnLine',
                {}
              )(
                <Select allowClear="true" placeholder="SIM卡状态" style={{ width: '100%' }}>
                  <Option value={0}>否</Option>
                  <Option value={1}>是</Option>
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={4} style={{ display: this.state.expand ? 'block' : 'none' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator('cardSysVer', {
                rules: [{ message: '请输入系统版本...' }],
              })(<Input placeholder="系统版本" />)}
            </FormItem>
          </Col>
          <Col span={4} style={{ display: this.state.expand ? 'block' : 'none' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator('fpgaVer', {
                rules: [{ message: '请输入fpga...' }],
              })(<Input placeholder="fpga版本" />)}
            </FormItem>
          </Col>
          <Col span={4} style={{ display: this.state.expand ? 'block' : 'none' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator('remark', {
                rules: [{ message: '请输入备注...' }],
              })(<Input placeholder="备注" />)}
            </FormItem>
          </Col>

          <Col span={4} style={{ display: this.state.expand ? 'block' : 'none' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator('scrResolution', {
                rules: [{ message: '请输入屏幕分辨率...' }],
              })(<Input placeholder="屏幕分辨率" />)}
            </FormItem>
          </Col>
          <Col span={4} style={{ display: this.state.expand ? 'block' : 'none' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator(
                'alarmFlag',
                {}
              )(
                <Select allowClear="true" placeholder="报警状态" style={{ width: '100%' }}>
                  <Option value={0}>无报警</Option>
                  <Option value={1}>报警中</Option>
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={4} style={{ display: this.state.expand ? 'block' : 'none' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator('connVer', {
                rules: [{ message: '请输入通信版本...' }],
              })(<Input placeholder="通信版本" />)}
            </FormItem>
          </Col>
          <Col span={4} style={{ display: this.state.expand ? 'block' : 'none' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator('playerVer', {
                rules: [{ message: '请输入播放器版本...' }],
              })(<Input placeholder="播放器版本" />)}
            </FormItem>
          </Col>
          <Col span={4} style={{ display: this.state.expand ? 'block' : 'none' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator('cityId', {
                rules: [{ message: '请输入所属城市...' }],
              })(<Select placeholder="所属城市" allowClear="true" style={{ width: '100%' }}>
                {this.props.city.map(item => (
                  <Option value={item.code}>{item.name}</Option>
                ))}
              </Select>)}
            </FormItem>
          </Col>
          <Col span={8} style={{ display: this.state.expand ? 'block' : 'none' }}>
            <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
              {getFieldDecorator('date')(
                <RangePicker
                  format="YYYY-MM-DD"
                  placeholder={['安装开始日期', '安装结束日期']}
                  // onChange={onChange}
                  // onOk={onOk}
                  style={{ width: '100%' }}
                />
              )}
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span={24} style={{ textAlign: 'right' }}>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button type="primary" style={{ marginLeft: 8 }} onClick={this.exportExcel}>
              导出
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
              重置
            </Button>
            <a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.toggle}>
              展开 <Icon type={this.state.expand ? 'up' : 'down'} />
            </a>
          </Col>
        </Row>
      </Form>
    );
  }
}
